<template>
	<!-- 健康档案 -->
	<view class="healthRecord">
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="请先添加家庭成员健康档案" v-if="healthList.length == 0">
			<view class="tips">
				<u-icon name="warning-fill" color="#f9ae3d" style="margin-right: 10rpx"></u-icon>
				<text>请放心填写，您的信息仅用于购买药品和相关服务</text>
			</view>
		</u-empty>

		<view class="healthList-content" v-else>
			<view class="healthList-item" v-for="(item, index) in healthList" :key="item.id">
				<view class="healthList-header">
					健康档案
					<text style="float: right; color: #999">{{ formatTimestamps(item.createtime) }}</text>
				</view>
				<view class="invoice-item-content" :class="[item.isShow ? 'contentH' : '']">
					<view class="invoiceItem">
						<view class="invoiceItem-label">姓名</view>
						<view class="invoiceItem-infos">
							{{ item.name }}
						</view>
					</view>

					<view class="invoiceItem">
						<view class="invoiceItem-label">手机号</view>
						<view class="invoiceItem-infos">
							{{ item.phone }}
						</view>
					</view>

					<view class="invoiceItem">
						<view class="invoiceItem-label">性别</view>
						<view class="invoiceItem-infos">
							{{ item.sex ? '女' : '男' }}
						</view>
					</view>

					<view class="invoiceItem">
						<view class="invoiceItem-label">出生日期</view>
						<view class="invoiceItem-infos">
							{{ item.birth_date }}
						</view>
					</view>

					<view class="invoiceItem">
						<view class="invoiceItem-label">身份证</view>
						<view class="invoiceItem-infos">
							{{ item.idcard }}
						</view>
					</view>

					<view class="invoiceItem">
						<view class="invoiceItem-label">血型</view>
						<view class="invoiceItem-infos">
							{{ item.blood_type }}型
						</view>
					</view>

					<view class="invoiceItem">
						<view class="invoiceItem-label">药物过敏史</view>
						<view class="invoiceItem-infos">
							{{ item.history_of_drug_allergies }}
						</view>
					</view>

					<view class="invoiceItem">
						<view class="invoiceItem-label">有无疾病史</view>
						<view class="invoiceItem-infos">
							{{ item.history_of_illness }}
						</view>
					</view>

					<view class="invoiceItem">
						<view class="invoiceItem-label">有无遗传病</view>
						<view class="invoiceItem-infos">
							{{ item.is_there_any_genetic_disease_present }}
						</view>
					</view>

					<view class="invoiceItem">
						<view class="invoiceItem-label">有无残疾</view>
						<view class="invoiceItem-infos">
							{{ item.whether_there_is_a_disability_or_not }}
						</view>
					</view>
				</view>

				<view class="healthList-footer" @click="upShow(index)">
					{{ item.isShow ? '收起详情' : '展开详情' }}
					<uni-icons :type="item.isShow ? 'up':'down'" size="18" style="margin-left: 4px" color="#999"></uni-icons>
				</view>
			</view>
		</view>

		<view style="height: 150rpx"></view>

		<!-- 新增收货地址提交 -->
		<view class="addAddress-btn" :style="bottomStyle">
			<u-button type="primary" color="red" text="新增档案" shape="circle" @click="goToPath"></u-button>
		</view>
	</view>
</template>

<script>
import { userHealthList } from '../../api/home/index.js';
import { formatTimestamp } from '../../utils/tools.js';
export default {
	data() {
		return {
			healthList: []
		};
	},

	onShow() {
		this.getuserHealthList();
	},

	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},

	methods: {
		goToPath() {
			uni.navigateTo({
				url: '/pages/addArchives/addArchives'
			});
		},

		// 健康档案
		async getuserHealthList() {
			try {
				const resData = await userHealthList();
				this.healthList = resData.data;
				if (this.healthList.length > 0) {
					this.healthList.forEach((item) => {
						this.$set(item, 'isShow', false);
					});
				}
			} catch (e) {
				throw Error(e);
			}
		},

		formatTimestamps(time) {
			return formatTimestamp(time);
		},

		upShow(index) {
			this.healthList[index].isShow = !this.healthList[index].isShow;
		}
	}
};
</script>

<style scoped lang="scss">
.healthRecord {
	.tips {
		color: #f9ae3d;
		font-size: 24rpx;
		padding: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.healthList-content {
		box-sizing: border-box;
		padding: 20rpx;
		.healthList-item {
			box-sizing: border-box;
			padding: 30rpx;
			border-radius: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			.healthList-header {
				font-size: 26rpx;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px #f3f3f3 solid;
			}
			.invoice-item-content {
				margin-top: 20rpx;
				height: 160px;
				overflow: hidden;
				.invoiceItem {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #444;
					height: 50rpx;
					.invoiceItem-label {
						width: 160rpx;
						color: #999;
					}
				}
			}
			.contentH {
				height: 100%;
			}
			.healthList-footer {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #999;
			}
		}
	}

	.addAddress-btn {
		position: fixed;
		bottom: 0rpx;
		left: 0px;
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 20rpx;
		padding-top: 20rpx;
		background-color: #fff;
	}
}
</style>